<?php //$this->load->view('header') ;?>
 <?php if($large_photo_exists && $thumb_photo_exists == NULL):?>
    <script type="text/javascript" src="<?php echo base_url() ?>app/js/jquery.imgpreview.js"></script>
    <script type="text/javascript">
    // <![CDATA[
        var thumb_width    = <?php echo $thumb_width ;?> ;
        var thumb_height   = <?php echo $thumb_height ;?> ;
        var image_width    = <?php echo $img['image_width'] ;?> ;
        var image_height   = <?php echo $img['image_height'] ;?> ;
    // ]]>
    </script>
<?php endif ;?>
<?php if(isset($error_upload)) :?>

    <div class="alert alert-danger container">
        <button data-dismiss="alert" class="close"></button>
        <i class="fa fa-times-circle"></i>
        <ul>
            <li>
                <strong>Error uploading an Image!</strong>
            </li>
            <li>
                <?php echo $error_upload ;?>
            </li>
        </ul>

    </div>
    
<?php endif ;?>

<?php if($large_photo_exists && $thumb_photo_exists == NULL) :?>
       <!--  <div class="col-lg-12 col-md-12 bg_crop_photo text-center">Add Portrait</div> -->
    <div class="container no-padding">
        <div class="col-lg-12 col-md-12 no-padding space-margin-bottom">
            <div class="col-lg-8 col-md-8 no-padding text-center" id="" style="background-color:#eee;min-height:500px; margin-right:20px;">
                <img src="<?php echo base_url() . $upload_path.$img['file_name'];?>" class="thumbnails_init img-responsive" id="thumbnail" alt="Create Thumbnail" style="max-width:650px;" />
            </div>
            <div class="col-lg-3 col-md-3 no-padding" style="border-left:2px solid #C9C9C9;padding-left:10px">
                <div class="col-lg-12 space-margin-bottom">
                    <div class="col-lg-12 col-md-12 title_show_page_crop_photo no-padding text-center">Your Profile Portrait</div>
                </div>
                <div class="col-lg-12 col-md-12 no-padding space-margin-bottom" style="left:25px">
                    <div style="overflow:hidden; width:<?php echo $thumb_width;?>px; height:<?php echo $thumb_height;?>px;">
                        <img src="<?php echo base_url() . $upload_path.$img['file_name'];?>" id="reviews_thumb" alt="Thumbnail Preview" />
                    </div>
                </div>
                <div class="col-lg-12 col-md-12 space-margin-bottom no-padding">
                     <form name="thumbnail" method="post">
                        <input type="hidden" name="x1" value="" id="x1" />
                        <input type="hidden" name="y1" value="" id="y1" />
                        <input type="hidden" name="x2" value="" id="x2" />
                        <input type="hidden" name="y2" value="" id="y2" />
                        <input type="hidden" name="file_name" value="<?php echo $img['file_name'] ;?>" />
                        <div class="col-lg-12 col-md-12 no-padding text-center">
                            <input type="submit" name="upload_thumbnail" class="btn btn-lg" value="Save Image" id="save_thumb" />
                        </div> 
                    </form>
                </div>

                <div class="col-lg-12 col-md-12 space-margin-bottom no-padding">
                    <div class="col-lg-12 col-md-12 text-center no-padding">
                        <a href="<?php echo site_url('buyer/editProfileUpdate');?>"><b>Cancel</b></a>
                    </div>
                </div>

                <div class="col-lg-12 col-md-12 no-padding">
                    <div class="col-lg-12 col-md-12 no-padding des-show-page-crop-photo">
                        Must be an actual picture of you! Logos, clip-art, group pictures, and digitally-altered images not allowed.
                    </div>
                </div>

            </div>
        </div>
    </div>
       


<?php else :?>
     <!-- <div class="col-lg-12 col-md-12 bg_crop_photo text-center">Add Portrait</div> -->
    <div class="container no-padding">
        <div class="col-lg-12 col-md-12 no-padding space-margin-bottom">
            <div class="col-lg-8 col-md-8 no-padding text-center" id="imagePreview" style="min-height:500px; margin-right:20px">
                <form name="photo" id="frm-add-photo-avatar" enctype="multipart/form-data" method="post">
                    <div class="btn-attachment col-lg-12 col-md-12 no-padding" id="click_upload_image">
                        <img src="<?php echo base_url().'files/logos/cong.png';?>" alt="Create Thumbnail" />
                        <input type="file" name="image" class="uploadFile" size="30" style="min-height:500px;min-width:654px;" /> 
                    </div>
                </form>
            </div>
            <!-- <div class="col-lg-1 col-md-1">
                <div class="divide_vertical_add_photo"></div>
            </div> -->
            <div class="col-lg-3 col-md-3 no-padding" style="border-left:2px solid #C9C9C9;" >
                <div class="col-lg-12 space-margin-bottom">
                    <div class="col-lg-12 col-md-12 title_show_page_crop_photo no-padding text-center">Your Profile Portrait</div>
                </div>
                <div class="col-lg-12 col-md-12 no-padding space-margin-bottom" style="left:25px">
                    <div style="overflow:hidden; width:200px; height:200px;">
                        <img id="reviews_thumb"/>
                    </div>
                </div>
                <div class="col-lg-12 col-md-12 space-margin-bottom no-padding">
                     <form name="thumbnail" method="post">
                        <div class="col-lg-12 col-md-12 no-padding text-center">
                            <input type="submit" name="upload_thumbnail" class="btn btn-lg" value="Save Image" id="save_thumb" />
                         </div> 
                    </form>
                </div>

                <div class="col-lg-12 col-md-12 space-margin-bottom no-padding">
                    <div class="col-lg-12 col-md-12 text-center no-padding">
                        <a href="<?php echo site_url('buyer/editProfileUpdate');?>"><b>Cancel</b></a>
                    </div>
                </div>

                <div class="col-lg-12 col-md-12 no-padding">
                    <div class="col-lg-12 col-md-12 no-padding des-show-page-crop-photo">
                        Must be an actual picture of you! Logos, clip-art, group pictures, and digitally-altered images not allowed.
                    </div>
                </div>

            </div>
        </div>
    </div>
    
<?php   endif ?>


    <div class="col-lg-12 col-md-12 no-padding">
        <div class="col-lg-6 col-md-6 no-padding drag_frame_image">
            Drag frame to adjust portrait 
        </div>
    </div>

    <div class="col-lg-12 col-md-12 no-padding">
        <form name="photo" id="frm-add-photo-avatar" enctype="multipart/form-data" method="post">
            <div class="btn-attachment col-lg-3 col-md-3 no-padding" id="click_upload_image">
                <a><span class="label-attach">Click Here to upload Image</span></a>
                <input type="file" class="uploadFile" name="image" size="30"/> 
            </div>
            <div class="col-lg-4 col-md-4">
                <input style="display:none;" id="submit_button_id" type="submit" name="upload" class="btn-primary" value="Upload" />
            </div>        
        </form>    
    </div>
<div style="clear:both;"></div>
 <script type="text/javascript">

  function submitForm() {
        document.getElementById("submit_button_id").click(); // Or whatever
    }
    $(document).ready(function(){
        //$(".thumbnails_init").imgAreaSelect({ x1: 150, y1: 150, x2: 200, y2: 200,maxHeight:232,maxWidth:232 });

        $(".uploadFile").change(function(){
            
            var files = !!this.files ? this.files : [];
            if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
            
            if (/^image/.test( files[0].type)){ // only image file
                var reader = new FileReader(); // instance of the FileReader
                reader.readAsDataURL(files[0]); // read the local file
                reader.onloadend = function(){ // set image data as background of div
                    var html = '<img src="'+this.result+'" id="thumbnail" class="thumbnails_init img-responsive" alt="Thumbnail Preview" />'
                    $("#imagePreview").find('img').attr({src:this.result, id:"thumbnail", class:"thumbnails_init img-responsive"});
                    $("#imagePreview").find('input').remove();
                    $(".thumbnails_init").imgAreaSelect({ x1: 0, y1: 0, x2: 200, y2: 200,maxHeight:232,maxWidth:232,parent: '#imagePreview'});
                    //$("#imagePreview").css("background-image", "url("+this.result+")");
                }
            }
        });
        $(".imgareaselect-outer").remove();
    })
 </script>

<?php //$this->load->view('footer');?>
